<template>
  <div id="data-view">
    <dv-full-screen-container>
      <top-header />
      <dv-border-box-1 class="main-content">
        <div class="first-left-col">
          <left-row-up-chart />
          <left-row-down-chart />
        </div>
        <div class="second-center-col">
          <center-row-up-content />
          <center-row-down-content />
        </div>
        <div class="third-right-col">
          <right-row-up-content />
          <right-row-center-content />
          <right-row-down-content />
        </div>
      </dv-border-box-1>
    </dv-full-screen-container>
  </div>
</template>

<script>
import topHeader from "./index/topHeader";
import leftRowUpChart from "./index/LeftRowUpChart.vue";
import leftRowDownChart from "./index/LeftRowDownChart.vue";
import CenterRowUpContent from "./index/centerRowUpContent.vue";
import CenterRowDownContent from "./index/centerRowDownContent.vue";
import RightRowUpContent from "./index/rightRowUpContent.vue";
import RightRowDownContent from "./index/rightRowDownContent.vue";
import RightRowCenterContent from "./index/rightRowCenterContent.vue";

export default {
  name: "DataView",
  components: {
    topHeader,
    leftRowUpChart,
    leftRowDownChart,
    CenterRowUpContent,
    CenterRowDownContent,
    RightRowUpContent,
    RightRowDownContent,
    RightRowCenterContent,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="less">
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url("./img/Screen062301.jpg");
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }
  .main-content {
    flex: 1;
    display: flex;
    top: -3%;
    height: 93%;
    flex-direction: row;
  }
  .first-left-col {
    float: left;
    position: relative;
    flex: 1;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    width: 25%;
    height: 100%;
    margin: 10px;
  }
  .second-center-col {
    float: left;
    position: relative;
    flex: 1;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    width: 45%;
    height: 100%;
    margin: 10px;
  }
  .third-right-col {
    float: left;
    position: relative;
    flex: 1;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    width: 25%;
    height: 100%;
    margin: 10px;
  }
}
</style>
